// 全局 Element Plus 组件样式定制

// 按钮样式优化，与项目UI风格保持一致
.el-button {
  border-radius: 6px !important;
  transition: all 0.2s ease-in-out !important;
  border: none !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;

  // 添加一个伪元素用于hover效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
  }

  &:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;

    &::before {
      opacity: 1;
    }
  }

  &:focus {
    outline: none !important;
  }

  &:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  // 修复带图标按钮的宽度问题
  &.is-icon-only {
    width: auto !important;
    min-width: auto !important;
    padding: 8px 8px !important;
  }

  // 禁用状态样式 - 更加优雅
  &.is-disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    background: #f0f0f0 !important;
    color: #aaa !important;
    border: 1px solid #e0e0e0 !important;

    &:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  }
}

// 默认按钮样式 (在白色背景上更明显且有突出感)
.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.el-button--text):not(.el-button--link) {
  background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
  color: #303133 !important;

  &:hover {
    background: linear-gradient(135deg, #ffffff, #ffffff) !important;
  }
}

// 主要按钮样式 (调整为更浅的蓝色)
.el-button--primary {
  background: linear-gradient(135deg, #4895ef, #4361ee) !important;
  color: white !important;

  &:hover {
    background: linear-gradient(135deg, #56a0f5, #4f71ff) !important;
    box-shadow: 0 6px 12px rgba(67, 97, 238, 0.3) !important;
  }
}

// 成功按钮样式
.el-button--success {
  background: linear-gradient(135deg, #4cc9f0, #38b000) !important;
  color: white !important;

  &:hover {
    background: linear-gradient(135deg, #5dd5f5, #42c700) !important;
    box-shadow: 0 6px 12px rgba(76, 201, 240, 0.3) !important;
  }
}

// 警告按钮样式
.el-button--warning {
  background: linear-gradient(135deg, #fca311, #e85d04) !important;
  color: white !important;

  &:hover {
    background: linear-gradient(135deg, #fdba28, #f46d0a) !important;
    box-shadow: 0 6px 12px rgba(252, 163, 17, 0.3) !important;
  }
}

// 危险按钮样式
.el-button--danger {
  background: linear-gradient(135deg, #f94144, #d00000) !important;
  color: white !important;

  &:hover {
    background: linear-gradient(135deg, #fa5a5d, #e60000) !important;
    box-shadow: 0 6px 12px rgba(249, 65, 68, 0.3) !important;
  }
}

// 信息按钮样式 (调整为更灰的颜色)
.el-button--info {
  background: linear-gradient(135deg, #9d9d9d, #7a7a7a) !important;
  color: white !important;

  &:hover {
    background: linear-gradient(135deg, #aeaeae, #8a8a8a) !important;
    box-shadow: 0 6px 12px rgba(122, 122, 122, 0.3) !important;
  }
}

// 文字按钮样式
.el-button--text {
  background: transparent !important;
  box-shadow: none !important;
  color: #4895ef !important;

  &:hover {
    background: rgba(72, 149, 239, 0.1) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  // 文字按钮禁用状态
  &.is-disabled {
    background: transparent !important;
    opacity: 0.5 !important;
    color: #bbb !important;
  }
}

// 链接按钮样式
.el-button--link {
  background: transparent !important;
  box-shadow: none !important;
  color: #4895ef !important;

  &:hover {
    background: rgba(72, 149, 239, 0.1) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  // 链接按钮禁用状态
  &.is-disabled {
    background: transparent !important;
    opacity: 0.5 !important;
    color: #bbb !important;
  }
}

// 小型按钮
.el-button--small {
  border-radius: 4px !important;
}

// 大型按钮
.el-button--large {
  border-radius: 8px !important;
}

// 去除按钮默认的轻微圆角
.el-button:not(.is-round):not(.is-circle) {
  border-radius: 6px !important;
}

// 修复带图标按钮的显示问题
.el-button [class*="el-icon"] + span {
  margin-left: 4px !important;
}

.el-button span + [class*="el-icon"] {
  margin-left: 4px !important;
}

// 表单输入框统一样式
.el-input__wrapper {
  border-radius: 6px !important;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease-in-out !important;

  &:hover {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
  }

  &.is-focus {
    box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.3) !important;
  }
}

// 数字输入框
.el-input-number {
  border-radius: 6px !important;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;

  .el-input-number__decrease,
  .el-input-number__increase {
    border-radius: 0 !important;
    background: #f5f7fa !important;
    transition: all 0.2s ease-in-out !important;

    &:hover {
      background: #e4e7ed !important;
      color: #409eff !important;
    }
  }

  &:hover {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
  }

  &.is-controls-right {
    .el-input-number__decrease,
    .el-input-number__increase {
      border-left: 1px solid #dcdfe6 !important;
    }

    .el-input-number__increase {
      border-bottom: 1px solid #dcdfe6 !important;
    }
  }
}

// 下拉选择框
.el-select {
  .el-select__wrapper {
    border-radius: 6px !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
    }

    &.is-focus {
      box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.3) !important;
    }
  }

  &.is-disabled {
    .el-input__wrapper {
      opacity: 0.6 !important;
      cursor: not-allowed !important;
      box-shadow: none !important;
      background: #f0f0f0 !important;
    }
  }
}

// 下拉选项
.el-select-dropdown {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e4e7ed !important;

  .el-select-dropdown__item {
    transition: all 0.2s ease-in-out !important;

    &:hover {
      background: #f5f7fa !important;
    }

    &.selected {
      color: #409eff !important;
      font-weight: bold !important;
    }
  }
}

// 级联选择器
.el-cascader {
  .el-input__wrapper {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
    }

    &.is-focus {
      box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.3) !important;
    }
  }
}

// 日期选择器
.el-date-editor {
  .el-input__wrapper {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
    }

    &.is-focus {
      box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.3) !important;
    }
  }

  &.el-date-editor--daterange,
  &.el-date-editor--timerange {
    .el-input__wrapper {
      &:first-child,
      &:last-child {
        border-radius: 6px !important;
      }
    }
  }
}

// 时间选择器
.el-time-panel {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e4e7ed !important;

  .el-time-spinner__item {
    &:hover:not(.is-disabled) {
      background: #f5f7fa !important;
    }

    &.active:not(.is-disabled) {
      color: #409eff !important;
      font-weight: bold !important;
    }
  }
}

// 时间选择器组件
.el-time-picker {
  .el-input__wrapper {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
    }

    &.is-focus {
      box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.3) !important;
    }
  }
}

// 标签输入框
.el-input-tag {
  border-radius: 6px !important;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;

  &:hover {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
  }

  &.is-focus {
    box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.3) !important;
  }

  .el-input-tag__input {
    border: none !important;
    box-shadow: none !important;
  }
}

// 复选框
.el-checkbox {
  &.is-bordered {
    border-radius: 6px !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
    }
  }
}

// 复选框组
.el-checkbox-group {
  .el-checkbox {
    margin-right: 15px !important;
  }
}

// 单选框
.el-radio {
  &.is-bordered {
    border-radius: 6px !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
    }
  }
}

// 单选框组
.el-radio-group {
  .el-radio {
    margin-right: 15px !important;
  }
}

// 开关
.el-switch {
  .el-switch__core {
    border-radius: 10px !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;

    &::after {
      border-radius: 50% !important;
      transition: all 0.2s ease-in-out !important;
    }
  }

  &:hover {
    .el-switch__core {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
    }
  }
}

// 滑块
.el-slider {
  .el-slider__bar {
    background-color: #409eff !important;
  }

  .el-slider__button {
    border: 2px solid #409eff !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  }

  .el-slider__button-wrapper {
    &:hover {
      .el-slider__button {
        transform: scale(1.2) !important;
      }
    }
  }

  .el-slider__stop {
    background-color: #c0c4cc !important;
  }
}

// 评分
.el-rate {
  .el-rate__icon {
    transition: all 0.2s ease-in-out !important;

    &:hover {
      transform: scale(1.2) !important;
    }
  }
}

// 颜色选择器
.el-color-picker {
  .el-color-picker__trigger {
    border-radius: 6px !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
    }
  }
}

// 上传组件
.el-upload {
  .el-upload-dragger {
    border-radius: 8px !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
      border-color: #409eff !important;
    }
  }
}

// 分页器
.el-pagination {
  .btn-prev, .btn-next {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
      color: #409eff !important;
    }
  }

  .el-pager li {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
    min-width: 26px !important;
    height: 26px !important;
    line-height: 24px !important;

    &:hover {
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15) !important;
      color: #409eff !important;
    }
  }

  .el-pager li.is-active {
    background-color: #409eff !important;
    border-color: #409eff !important;
    color: #fff !important;
  }

  .el-select .el-input .el-input__wrapper {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
    height: 26px !important;
  }

  .el-pagination__jump {
    margin-left: 12px !important;
    font-size: 12px !important;
  }

  .el-pagination__editor.el-input {
    width: 40px !important;
    height: 26px !important;

    .el-input__wrapper {
      border-radius: 4px !important;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
      height: 26px !important;
      padding: 0 8px !important;
    }
  }

  .el-pagination__sizes {
    .el-input {
      width: 80px !important;
    }
  }
}

// 表格组件
.el-table {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
  border: none !important;

  th.el-table__cell {
    background-color: #f5f7fa !important;
    color: #606266 !important;
    font-weight: 600 !important;
  }

  .el-table__body {
    border: none !important;
  }

  .el-table__header {
    border: none !important;
  }

  th, td {
    color: #606266 !important;
    text-align: center !important;
    border-bottom: 1px solid #ebeef5 !important;
  }

  th:last-child, td:last-child {
    border-right: none !important;
  }

  tr:hover {
    background-color: #f5f7fa !important;
  }

  .el-table__row--striped {
    background-color: #fafafa !important;
  }

  .el-table__row--striped:hover {
    background-color: #f5f7fa !important;
  }

  .el-table__fixed-right {
    background-color: #f5f7fa !important;
  }

  .el-table__inner-wrapper::before {
    height: 0 !important;
  }
}

// 对话框组件
.el-dialog {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1) !important;

  .el-dialog__header {
    border-bottom: 1px solid #e4e7ed !important;
    padding: 10px 10px !important;

    .el-dialog__title {
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #303133 !important;
    }

    .el-dialog__headerbtn {
      top: 20px !important;
      right: 10px !important;
    }
  }

  .el-dialog__body {
    padding: 10px 0 !important;
  }

  .el-dialog__footer {
    border-top: 1px solid #e4e7ed !important;
  }
}

// 侧拉栏组件
.el-drawer {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1) !important;

  .el-drawer__header {
    border-bottom: 1px solid #e4e7ed !important;
    padding: 10px 20px !important;
    margin-bottom: 0 !important;

    .el-drawer__title {
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #303133 !important;
    }

    .el-drawer__close-btn {
      top: 20px !important;
      right: 10px !important;
    }
  }

  .el-drawer__body {
    padding: 10px 10px !important;
  }

  .el-drawer__footer {
    border-top: 1px solid #e4e7ed !important;
    padding: 10px !important;
  }
}